<script setup lang="ts">
import { toRefs, reactive, onBeforeMount, watch } from 'vue';
import NewsItem3 from '@/components/News-item3.vue';
const props = defineProps({
  list: {
    type: Array,
    default: [] as Array<Record<string, string>>
  },
})
const { list } = toRefs(props)
const state = reactive({
  main: [] as any,
  list: [] as any,
  last: [] as any,
})
watch(list, (val: any) => {
  state.main = val.slice(0, 2)
  state.list = val.slice(2, 5)
  state.last = val.slice(5, 11)
})
onBeforeMount(() => {
  state.main = list.value.slice(0, 2)
  state.list = list.value.slice(2, 5)
  state.last = list.value.slice(5, 11)
})
</script>

<template>
  <div class="container">
    <div class="information-wrapper">
      <div class="top flex mb-3">
        <div class="information-box flex-1 flex">
          <router-link class="top-item" v-for="item in state.main" :key="item.id" :to="'/news/article?id=' + item.id">
            <div class="date-wrap text-main mb-2 cp">
              <span class="year font-sm">{{ item.year }}</span>
              <span class="md">{{ item.create_at }}</span>
            </div>
            <div class="info cp">
              <div class="title line-1 font-m text-main">{{ item.title }}</div>
              <div class="desc-wrap font-sm">
                <div class="desc text-body line-3">{{ item.introduce }}</div>
              </div>
            </div>
            <div class="img-wrap cp">
              <div class="img">
                <img :src="item.url" :alt="item.title">
              </div>
            </div>
            <div class="btn flex-center cp">
              <div class="arrow">
                <svg t="1511314697872" style="" viewBox="0 0 1024 1024" version="1.1" width="32" height="32">
                  <path
                    d="M347.526 657.92c7.68 7.68 7.68 20.48 0 28.16s-20.48 7.68-28.16 0l-160-160c-7.68-7.68-7.68-20.48 0-28.16l160-160c7.68-7.68 20.48-7.68 28.16 0s7.68 20.48 0 28.16L221.758 491.837h628.479c11.203 0 20.163 8.96 20.163 20.163s-8.96 20.163-20.163 20.163H221.439L347.524 657.92z">
                  </path>
                </svg>
              </div>
            </div>
          </router-link>
        </div>
        <div class="information-box flex-1">
          <NewsItem3 v-for="item in state.list" :key="item.id" :item="item"></NewsItem3>
        </div>
      </div>
      <div class="bot flex flex-wrap">
        <div class="bot-item" v-for="item in state.last" :key="item.id">
          <NewsItem3 :item="item"></NewsItem3>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.information-wrapper {
  padding-top: 60px;
  padding-bottom: 55px;

  .top-item {
    position: relative;
    width: 350px;
    height: 525px;
    padding: 35px;
    background: #FFFFFF;
    border: 1px solid #C6C6C6;
    border-radius: 12px;

    &:first-child {
      margin-right: 10px;
    }

    .date-wrap {
      font-size: 20px;
      font-family: Arial;
      font-weight: 400;

      .year {
        display: none;
      }
    }

    .desc-wrap {
      margin-top: 10px;
      margin-bottom: 35px;
      height: 48px;
    }

    .img-wrap {
      width: 280px;
      height: 175px;
      overflow: hidden;

      .img {
        position: relative;
        width: 100%;
        height: 100%;
        transition: all .36s ease;

        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
    }

    .btn {
      position: absolute;
      left: 35px;
      bottom: 34px;
      width: 82px;
      height: 30px;
      color: transparent;
      opacity: 0;
      transition: all .36s ease;
      border-radius: 10px;
      transition: all 0.36s ease;
      background-image: linear-gradient(to right, #3888FF, #6c71FF, #AA58FA, #FB6D86);

      path {
        fill: #9195A3;
      }

      .arrow {
        transform: rotate(180deg);
      }
    }

    &:hover {
      .img {
        transform: scale(1.08);
      }

      .btn {
        bottom: 60px;
        opacity: 1;

        path {
          fill: #fff;
        }
      }
    }

  }

  .bot-item {
    width: 710px;
    flex-shrink: 0;

    &:nth-child(odd) {
      margin-right: 20px;
    }
  }
}

.information-box {
  width: calc(50% - 10px);

  &:nth-child(odd) {
    margin-right: 20px;
  }
}
</style>
